<template>
  <div class="trigger-btn">
    <el-button size="small" :disabled="props.isLook" @click="selectGoods">选择商品</el-button>
  </div>
  <div v-show="selectArr.length > 0" class="group-list">
    <div v-for="(item, index) in selectArr" :key="index" class="list-item">
      <img @click="delShop(item)" class="del-img" width="16" height="16" src="@/assets/customer/del.png" alt="删除" />
      <div class="item-img">
        <img width="36" height="36" style="border-radius: 4px" :src="item.cover" alt="" />
      </div>
      <div class="item-tips">
        <div class="item-title">{{ item.product_name || '--' }}</div>
        <div class="item-title item-name">{{ item.shop_name || '--' }}</div>
      </div>
    </div>
  </div>
  <SelectGoodsDialog
    v-model="selectGoodsDialogVisible"
    :multiple="props.multiple"
    :source="props.source"
    :store_list="props.store_list"
    :select_goods_list="props.select_goods_list"
    @select="select"
  />
</template>

<script setup lang='ts'>
import {reactive, ref, computed, watch, onMounted, provide} from "vue"
import {useRouter, useRoute} from "vue-router"
import SelectGoodsDialog from './index.vue'
let selectGoodsDialogVisible = ref<boolean>(false)   // 控制弹框是否显示
const selectArr = ref([])
const emit = defineEmits(['selectedGoods'])
interface Props{
    multiple: boolean
    source: Array<number>
    store_list: Array<number>
    select_goods_list: Array<any>
    isLook: boolean
  }

  const props = withDefaults(defineProps<Props>(),{
    isLook: false,
    multiple: true,
    source: () => [],
    store_list: () => [],
    select_goods_list: () => []
  })
// let multiple = ref<boolean>(true)  // 默认为多选 true 设置为false时 单选
// let source = ref<Array<number>>([1,2,3])   // 店铺类型 默认为[] Array<number> 类型
// let store_list = ref<Array<number>>([1,2,3])   // 店铺id 默认为[] Array<number> 类型
// let select_goods_list = ref<Array<number>>([8,9,23,39,40,55,60])   // 用于回显选中的商品 传商品id 默认为[] Array<number> 类型
const selectGoods = () => {
  selectGoodsDialogVisible.value = true
} 
const select = (arr: any) => {   // 返回选中的商品数组
  selectArr.value = arr
  emit('selectedGoods', selectArr.value)
}
const delShop = (val: any) => {
  if(props.isLook){
    return
  }else{
    selectArr.value = selectArr.value.filter((item: any) => {
      return item.id != val.id
    })
    emit('selectedGoods', selectArr.value)
  }
}
watch(()=>props.select_goods_list,(val) => {
  if(val.length){
    selectArr.value = props.select_goods_list
  }
},{ immediate:true })
</script>

<style lang="scss" scoped>
  .group-list {
    display: flex;
    flex-wrap: wrap;
    .list-item {
      width: 227px;
      height: 48px;
      display: flex;
      border: 1px solid #ffc69e;
      line-height: 20px;
      position: relative;
      margin: 0 16px 16px 0;
      .del-img {
        cursor: pointer;
        position: absolute;
        right: -6px;
        top: -6px;
      }
      .item-img {
        margin: 6px 10px 6px 6px;
      }
      .item-tips {
        margin: 4px 0;
        .item-title {
          color: #33302d;
          font-size: 14px;
          width: 100%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          word-break: break-all;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .item-name {
          color: #ff7511
        }
      }
    }
  }
</style>
